<script setup lang="ts">
import { nextTick, reactive, ref } from "vue";
import { useRoute } from "vue-router";
import xmUpload from "@/components/Upload/xm-upload.vue";
import { ToastError, ToastSuccess, Toastloading } from "@/utils/public";
import { parseTime } from "@/utils";
import { contentApi } from "@/api/controller";

const $route = useRoute();
interface optionsForm {
  label: string,
  value: number
}
const props = defineProps({
  userCatArr: {
    type: Array<optionsForm>,
    default: () => []
  }
})
const showOptions = [
  { label: '显示', value: 0 },
  { label: '不显示', value: 1 }
]
const formLabelWidth = "120px";
const dataForm = ref();
const $emit = defineEmits(["updateList"]);
const action = reactive({
  dialogFormVisible: false,
  title: "",
});
interface formTypes {
  id:string | number
  name: string
  sort: number
  mincharm: number
  maxcharm: number
  minrich: number
  maxrich: number
  minmoney: number
  maxmoney: number
  type: string | number
  status: string | number
  start_timestamp: string | number
  end_timestamp: string | number
  action: string | number
  user_cat: string | number
  desc: string
  wealth_value: string
  img: string
  gift_id:number | string
  room_ids: string
}

const form = reactive({}) as formTypes;
const formRules = {
  name: [{ required: true, trigger: 'blur', message: '名不可为空' }],
  sort: [{ required: true, trigger: 'blur', message: '排序不可为空' }],
  type: [{ required: true, trigger: 'blur', message: '广告位置不可为空' }],
  img: [{ required: true, trigger: 'blur', message: '图片不可为空' }],
  start_timestamp: [{ required: true, trigger: 'blur', message: '请选择开始时间' }],
  end_timestamp: [{ required: true, trigger: 'blur', message: '请选择结束时间' }],
  status: [{ required: true, trigger: 'blur', message: '请选择活动状态' }],
  action: [{ required: true, trigger: 'blur', message: '跳转地址不可为空' }],
  user_cat: [{ required: true, trigger: 'blur', message: '请选择用户分类' }],
  mincharm: [{ required: true, trigger: 'blur', message: '请输入最小魅力值' }],
  maxcharm: [{ required: true, trigger: 'blur', message: '请输入最大魅力值' }],
  minrich: [{ required: true, trigger: 'blur', message: '请输入最小财富值' }],
  maxrich: [{ required: true, trigger: 'blur', message: '请输入最大财富值' }],
  minmoney: [{ required: true, trigger: 'blur', message: '请输入最小充值钻石' }],
  maxmoney: [{ required: true, trigger: 'blur', message: '请输入最大充值钻石' }],
  gift_id: [{ required: true, trigger: 'blur', message: '请输入礼物id' }],
};
const handleSubmit = () => {
  dataForm.value.validate(async (valid: any) => {
    if(valid) {
      const loading = Toastloading()
      let submitSet = false
      if(form.id) {
        await contentApi.updateBanner(form).then(res=>{
          ToastSuccess('修改成功')
          submitSet = true
        }).catch(()=>{
          loading.close()
        })
      }else {
        await contentApi.addBanner(form).then(res=>{
          ToastSuccess('新增成功')
          submitSet = true
        }).catch(()=>{
          loading.close()
        })
      }
      if(!submitSet) return
      loading.close()
      $emit("updateList");
      closeDialog()
    }
  });
};
const openDialog = (query: any = {}) => {
  const { id = 0, name = "", sort = 0, mincharm = 0, maxcharm = 0, minrich = 0, maxrich = 0, type = "",
    status = "", start_timestamp = "", end_timestamp = "", minmoney = 0, maxmoney = 0,room_ids='',
    user_cat = 0, desc = "", wealth_value = "", img = "", action: actionUrl = "",gift_id='' } = query;
  if (type < 0) return ToastError('form:type 为获取到')
  Object.assign(form, {
    type,
    id,
    gift_id,
    name,
    sort,
    mincharm,
    maxcharm,
    minrich,
    maxrich,
    status,
    start_timestamp,
    end_timestamp,
    minmoney,
    maxmoney,
    action: actionUrl,
    user_cat,
    desc,
    wealth_value,
    img,
    room_ids
  })
  let title = "新增";
  if (name) {
    title = "修改" + name;
  }
  action.title = `${$route.meta.title}-${title}`;
  action.dialogFormVisible = true;
};
const closeDialog = () => {
  Object.assign(form, {
    id:'',
    gift_id:'',
    name:'',
    sort:'',
    mincharm:'',
    maxcharm:'',
    minrich:'',
    maxrich:'',
    type:'',
    status:'',
    start_timestamp:'',
    end_timestamp:'',
    minmoney:'',
    maxmoney:'',
    action:'',
    user_cat:'',
    desc:'',
    wealth_value:'',
    img:'',
    room_ids:''
  });
  nextTick(()=>{
    dataForm.value.clearValidate();
  })
  action.dialogFormVisible = false;
};
defineExpose({
  openDialog,
});
</script>

<template>
  <div>
    <el-dialog
      top="5vh"
      class="xm-dialog xm-dialog-cont-y"
      v-model="action.dialogFormVisible"
      :close-on-click-modal="false"
      :show-close="false"
      :close-on-press-escape="false"
      :title="action.title">
      <el-form ref="dataForm" :model="form" :rules="formRules">
        <el-form-item :label-width="formLabelWidth" label="名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="活动说明">
          <el-input v-model="form.desc" placeholder="请输入活动说明" />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="跳转" prop="action">
          <el-input v-model="form.action" placeholder="请输入活动跳转地址" />
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="用户分类" prop="user_cat">
              <el-select v-model="form.user_cat" placeholder="用户分类">
                <el-option v-for="(option, index) of props.userCatArr" :key="index" :label="option.label"
                  :value="option.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="状态" prop="status">
              <el-select v-model="form.status" placeholder="状态">
                <el-option v-for="(option, index) of showOptions" :key="index" :label="option.label"
                  :value="option.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="最小魅力值" prop="mincharm">
              <el-input type="number" v-model="form.mincharm" placeholder="请输入最小魅力值" class="xm-width200" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="最大魅力值" prop="maxcharm">
              <el-input type="number" v-model="form.maxcharm" placeholder="请输入最大魅力值" class="xm-width200" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="最小财富值" prop="minrich">
              <el-input type="number" v-model="form.minrich" placeholder="请输入最小财富值" class="xm-width200" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="最大财富值" prop="maxrich">
              <el-input type="number" v-model="form.maxrich" placeholder="请输入最大财富值" class="xm-width200" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="最小充值钻石" prop="minmoney">
              <el-input type="number" v-model="form.minmoney" placeholder="请输入最小充值钻石" class="xm-width200" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="最大充值钻石" prop="maxmoney">
              <el-input type="number" v-model="form.maxmoney" placeholder="请输入最大充值钻石" class="xm-width200" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="开始时间" prop="start_timestamp">
              <el-date-picker v-model="form.start_timestamp" type="datetime"
              format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss" placeholder="选择日期时间" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="结束时间" prop="end_timestamp">
              <el-date-picker v-model="form.end_timestamp" type="datetime"
              format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss" placeholder="选择日期时间" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="广告顺序" prop="sort">
              <el-input v-model="form.sort" placeholder="请输入广告顺序" class="xm-width200" />
            </el-form-item>
            <el-form-item v-if="form.type == 3" :label-width="formLabelWidth" label="房间ID">
              <el-input
                v-model="form.room_ids"
                :autosize="{ minRows: 3, maxRows: 3}"
                type="textarea"
                placeholder="请输入房间ID，如果有多个，用英文逗号分隔"
              />
            </el-form-item>
            <el-form-item v-if="form.type == 11" :label-width="formLabelWidth" label="礼物id" prop="gift_id">
              <el-input v-model="form.gift_id" placeholder="请输入礼物id" class="xm-width200" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="图片" prop="img">
              <xmUpload :data={type:5} :limit="1" v-model:fileUrl="form.img" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="handleSubmit()">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
:deep(.xm-dialog) {
  .el-dialog__body {
    height: 500px;
    overflow-y: auto;
  }
}
</style>
